<template>
  <div class="works-list-container">
    <div v-if="works.length === 0" class="empty-list">
      <AppstoreOutlined class="empty-icon" />
      <p>没有找到相关作品</p>
    </div>

    <div class="works-grid">
      <a-card
        v-for="item in works"
        :key="item.id"
        class="work-card"
        :bordered="false"
        hoverable
        @click="handleView(item)"
      >
        <div class="cover">
          <img :src="item.coverUrl || item.coverFileUrl" :alt="item.worksName" />
        </div>
        <div class="info">
          <h4 class="title">{{ item.worksName }}</h4>
          <p class="desc">{{ item.description }}</p>
          <div class="meta">
            <span v-if="item.isCharge === 1" class="price">¥{{ item.price || 0 }}</span>
            <span v-else class="free">免费</span>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AppstoreOutlined } from '@ant-design/icons-vue'

interface WorkItem {
  id: number
  worksName: string
  coverUrl?: string
  coverFileUrl?: string
  description?: string
  userId?: number
  isCharge?: number
  price?: number
}

const props = defineProps<{ works: WorkItem[] }>()

const emit = defineEmits<{ (e: 'work-view', work: WorkItem): void }>()

const handleView = (work: WorkItem) => {
  emit('work-view', work)
}
</script>

<style scoped>
.works-list-container { width: 100%; }
.empty-list { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #999; text-align: center; }
.empty-icon { font-size: 48px; color: rgba(255, 255, 255, 0.2); margin-bottom: 16px; }
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.work-card { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; overflow: hidden; cursor: pointer; transition: all .3s !important; }
.work-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 24px rgba(0,0,0,.2) !important; }
.cover { position: relative; padding-top: 56.25%; overflow: hidden; }
.cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.work-card:hover .cover img { transform: scale(1.05); }
.info { padding: 12px 14px 16px; }
.title { margin: 0 0 8px 0 !important; color: #fff !important; font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desc { margin: 0 8px 12px 0 !important; color: #ddd !important; font-size: 13px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.meta { font-size: 12px; color: #ccc; }
.price { color: #ff4757; font-weight: 600; }
.free { color: #67c23a; }
@media (max-width: 768px) { .works-grid { grid-template-columns: 1fr; } }
</style>


